<template>
	<view class="container">
		<view class="content_box text-center">
			<view class="vip-card-box" style="background-color: red;">
				<view class="title text-xl text-white padding-top">{{ title }}</view>
				<view class="img_box padding">
					<image :src="weburl + guess.photo" mode="widthFix"></image>
				</view>
			</view>
			<view class="cu-list grid col-2 no-border text-grey text-bold text-lg" style="background: none;">
				<view class="cu-item">
					<view :class="'answer_item '+ answer_a_selected" @click="picker('answer_a')">{{guess.answer_a}}</view>
				</view>
				<view class="cu-item ">
					<view :class="'answer_item '+ answer_b_selected" @click="picker('answer_b')">{{guess.answer_b}}</view>
				</view>
				<view class="cu-item ">
					<view :class="'answer_item '+ answer_c_selected" @click="picker('answer_c')">{{guess.answer_c}}</view>
				</view>
				<view class="cu-item ">
					<view :class="'answer_item '+ answer_d_selected" @click="picker('answer_d')">{{guess.answer_d}}</view>
				</view>
			</view>
			<view class=" margin-lr-lg padding-0 submit_btn">
				<button class="cu-btn" type="button" @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				guess_id:0,
				guess:[],
				current:0,
				correctCount:0,
				errorCount:0,
				answer_a_selected:'',
				answer_b_selected:'',
				answer_c_selected:'',
				answer_d_selected:'',
				selected_item:''
			}
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/other?type=guess',
			});	
		},
		onBackPress: function (option) {
            if (options.from === 'navigateBack') {  
				uni.switchTab({
					url: '/pages/index/index'
				})  
            } 
            return true;  
        }, 
		onLoad: function (option) {
			this.helper.checkLogin();
			this.loadData();
		},
		methods: {
			loadData: function() {
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getGuessInfo",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.current = res.data.data.current;
					this.maxnum = res.data.data.maxnum;
					this.title = res.data.data.title;
					if(this.current <= this.maxnum){
						this.getRandGuess();
					}else{
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success:function(res){
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					}
				})
			},
			getRandGuess: function() {
				let that = this;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getRandGuess",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.guess = res.data.data.item;
					this.guess_id = this.guess.id;
					this.answer_a_selected = '';
					this.answer_b_selected = '';
					this.answer_c_selected = '';
					this.answer_d_selected = '';
					this.selected_item = '';
				})
			},
			picker: function(e) {
				this.answer_a_selected = '';
				this.answer_b_selected = '';
				this.answer_c_selected = '';
				this.answer_d_selected = '';
				switch (e){
					case 'answer_a':
						this.answer_a_selected = 'selected';
						
						break;
					case 'answer_b':
						this.answer_b_selected = 'selected';
						break;
					case 'answer_c':
						this.answer_c_selected = 'selected';
						break;
					case 'answer_d':
						this.answer_d_selected = 'selected';
						break;
					default:
						break;
				}
				this.selected_item = e;
			},
			submit: function() {
				if(this.selected_item == ''){
					uni.showToast({
						title:"请选择答案！",
						icon:"none"
					})
					return;
				}
				this.doGuess();
			},
			doGuess: function(e) {
				let that = this;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['guess_id='+this.guess_id,'answer='+this.selected_item,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"doGuess",
					timestamp:timestamp,
					data:{guess_id:this.guess_id,answer:this.selected_item,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.showModal({
						title: "提示",
						content: res.data.message,
						showCancel: false,
						confirmText: "确定",
						success:function(res){
							that.loadData();
						}
					})
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss">

.img_box image {
    border: 1upx solid #ccc;
    border-radius: 20upx;
    width: 90%;
	background-color: #fff;
}
.answer_item{
	border-radius: 20upx;
	border: 1upx solid #999;
	text-align: center;
	width: 80%;
	margin: 0 auto;
	height: 90upx;
	line-height: 90upx;
}
.selected{
	border: 1upx solid #fff;
	background-color: red;
	color: #fff;
}
	.vip-card-box {
		height: 680upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 50upx;
		line-height: 50upx;
		z-index: 10
	}
</style>
